<template>
  <div id="windows"
       :style="{
          backgroundColor:theme.color.Window.backgroundColor,
          borderBottomColor:theme.color.DividingLine
        }"
       class="window-scroll wrapper">
    <draggable class="windows-box" :list="labels.windowLabels" :force-fallback="true" animation="300">
      <template #item="ctx">
        <div>
          <WindowLabel
              :title="ctx.element.title"
              :path="ctx.element.path"
              :index="ctx.index"
              :check="ctx.element.check"
              :window-type="ctx.element.windowType"
              @contextmenu="OpenContextmenu(ctx.index)"
              v-contextmenu:labelContextmenu
          />
        </div>
      </template>
    </draggable>
  </div>
  <v-contextmenu ref="labelContextmenu">
    <v-contextmenu-item @click="labels.closeLabel">
      关闭
    </v-contextmenu-item>
    <v-contextmenu-item @click="labels.closeOther">
      关闭其他
    </v-contextmenu-item>
    <v-contextmenu-item @click="labels.closeAll">
      关闭所有
    </v-contextmenu-item>
  </v-contextmenu>
</template>

<script setup lang="ts">
import WindowLabel from "./WindowLabel.vue";
import {useWindowsStore} from "../../../../store/windows";
import {useThemeStore} from "../../../../store/theme";
import {ref} from "vue";

const labelContextmenu = ref()
const labels = useWindowsStore()
const theme = useThemeStore()


function OpenContextmenu(index: number) {
  labels.UpdateSelect(index)
}

</script>

<style scoped>

#windows {
  height: 30px;
  display: flex;
  background-color: rgba(3, 27, 63, 0.98);
  /* 窗口底边样式 */
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #b0b4af;
}

/* 使用了拖拽组件化后 windows 失去对原来行排序的约束，需要在draggable 上面加上class 指定行排列*/
.windows-box {
  height: 100%;
  display: flex;
}

</style>